<template>
  <main class="h100">
    <iLayout>
      <section slot="title" class="flex_start">
        预警信息
      </section>
      <section slot="operation">
        <el-button type="danger" @click="addReportClick">新建预警</el-button>
      </section>
      <section slot="right" class="h100">
        <div class="flex_column flex_start h100">
          <div>
            <!-- <el-form label-width="100px"> -->
            <!-- <el-form-item label="选择日期">
                <el-radio v-for="(item,index) in queryDateList" @change="queryDateChange" :key="index" v-model="queryDateSelect" :label="item.value" border>{{item.label}}</el-radio>
                <el-date-picker v-model="DIYDate" value-format="yyyy-MM-dd HH:mm:ss" @change="DIYDateChange" :disabled="queryDateSelect!=-1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item> -->
            <el-row :gutter="20">
              <el-col v-for="(item,index) in queryDateList" :key="index" :span="3">
                <el-radio @change="queryDateChange" v-model="queryDateSelect" :label="item.value" border>{{item.label}}</el-radio>
              </el-col>
              <el-col :span="3">
                <el-date-picker v-model="DIYDate" value-format="yyyy-MM-dd HH:mm:ss" @change="DIYDateChange" :disabled="queryDateSelect!=-1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="3">
                <!-- 选择表单类型： -->
                <el-select v-model="queryTypeSelect" placeholder="警告类型" @change="queryTypeChange">
                  <el-option v-for="item in $store.state.unitLint" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <!-- 选择警告等级 -->
                <el-select v-model="queryReportGrade" placeholder="警告等级" @change="queryTypeChange">
                  <el-option v-for="item in reportTypes" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <!-- 选择警告状态 -->
                <el-select v-model="queryReportState" placeholder="警告状态" @change="queryTypeChange">
                  <el-option v-for="item in reportStates" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <!-- <div class="flex_start">
                <el-form-item class="" label="选择单元类型" :inline="true">
                  <el-select v-model="queryTypeSelect" placeholder="请选择" @change="queryTypeChange">
                    <el-option v-for="item in $store.state.unitLint" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="" label="选择警告等级" :inline="true">
                  <el-select v-model="queryReportGrade" placeholder="请选择" @change="queryTypeChange">
                    <el-option v-for="item in reportTypes" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="" label="选择警告状态" :inline="true">
                  <el-select v-model="queryReportState" placeholder="请选择" @change="queryTypeChange">
                    <el-option v-for="item in reportStates" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div> -->

            <el-row :gutter="20">
              <el-col :span="3">
                <el-input placeholder="查询字段" v-model="queryName"></el-input>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" style="width:200px" icon="el-icon-search" @click="getReportFun">查询</el-button>
              </el-col>
            </el-row>
            <!-- <div class="flex_start">
                <el-form-item label="名称查询">
                  <el-input placeholder="请输入名称字符" v-model="queryName"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width:200px" icon="el-icon-search" @click="getReportFun">查询</el-button>
                </el-form-item>
              </div> -->
            <!-- </el-form> -->
          </div>
          <div class="dataBox flex_1">
            <el-collapse v-loading="loadings.list" style="height:100%" accordion v-model="collapseValue" @change="collapseChange">
              <el-collapse-item v-for="(item,index) in handelReportList" :key="index" :name="index">
                <template slot="title">
                  <section class="reportRow w100 flex_sb" @click="getReportRecordData(item)">
                    <div class="reportRowBody flex_1 flex_start">
                      <div>
                        <el-tag :type="reportTypes2[item.warningLevel-1].tagType">{{reportTypes2[item.warningLevel-1].label}}</el-tag>
                      </div>
                      <div class="flex_1 routeName">{{item.projectName}}>{{item.sectionName}}>{{item.tunnelName}}>{{item.tcsName}}>{{item.elementName}}</div>
                      <div>
                        {{item.warningTime}}
                      </div>
                    </div>
                    <div style="margin-right:10px">
                      <el-button type="text" size="small" @click.stop="lookDetails(item)">预警详情</el-button>
                      <el-button type="text" size="small" @click.stop="handleReportClick(item)">处理</el-button>
                    </div>
                  </section>
                </template>
                <section class="handleBox">
                  <el-table :data="item.handleData" style="width: 100%" height="90%">
                    <el-table-column prop="createDate" label="处理时间">
                    </el-table-column>
                    <el-table-column prop="remark" label="描述">
                    </el-table-column>
                  </el-table>
                </section>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- <div>
            <el-pagination small @current-change="getReportFun" @size-change="getReportFun" :current-page="reprotPage.page" :page-size="reprotPage.limit" :pager-count="7" layout="prev, pager, next" :total="1">
            </el-pagination>
          </div> -->
        </div>
      </section>
      <!-- 对话框们 -->
      <section>
        <!-- 处理警告 -->
        <el-dialog title="处理警告" :visible.sync="dialog.handle" width="50%">
          <section>
            <el-form :model="handelReportForm" :rules="handelReportFormRules" class="demo-form-inline">
              <el-form-item label="警告等级" prop="reportTypeSelect">
                <el-select v-model="handelReportForm.reportTypeSelect" placeholder="请选择处理结果级别">
                  <el-option v-for="item in reportTypes2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="处理方式" prop="typeSelect">
                <el-select v-model="handelReportForm.typeSelect" placeholder="请选择处理方式">
                  <el-option v-for="item in handelType" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-alert :title="handelReportForm.typeSelect?handelType[handelReportForm.typeSelect-1].warn:''" :closable="false" type="warning" show-icon>
                </el-alert>
              </el-form-item>
              <el-form-item prop="remark">
                <el-divider content-position="left">处理描述</el-divider>
                <el-input type="textarea" v-model="handelReportForm.remark" :autosize="{minRows:8,MaxRows:10}">
                </el-input>
              </el-form-item>
            </el-form>
          </section>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.handle = false">取 消</el-button>
            <el-button type="primary" @click="handleReportFun()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 警告详情 -->
        <el-dialog title="警告详情" :visible.sync="dialog.lookDetails" width="50%">
          <div v-if="lookDetailsCache">
            <!-- <pre>
              {{lookDetailsCache}}
            </pre> -->
            <el-descriptions border :column="2" :title="`${lookDetailsCache.projectName}>${lookDetailsCache.sectionName}>${lookDetailsCache.tunnelName}>${lookDetailsCache.tcsName}>${lookDetailsCache.elementName}`">
              <el-descriptions-item label="警告等级">
                {{reportTypes2[lookDetailsCache.warningLevel].label}}
              </el-descriptions-item>
              <el-descriptions-item label="警告时间">{{lookDetailsCache.warningTime}}</el-descriptions-item>
              <el-descriptions-item label="警告描述">{{lookDetailsCache.remark}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.lookDetails = false">取 消</el-button>
            <el-button type="primary" @click="dialog.lookDetails = false">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 选择单元对话框 -->
        <el-dialog title="新建警示" :append-to-body="true" :visible.sync="selectUnitDialog" width="50%">
          <section class="h50vh" @click="selectUnitClick">
            <el-tree v-loading="loadings.tree" :default-expand-all="true" :data="unitTree" :props="unitTreeProps" @node-click="unitTreeNodeClick"></el-tree>
          </section>
          <span slot="footer" class="dialog-footer">
            <el-button @click="selectUnitDialog = false">取 消</el-button>
          </span>
        </el-dialog>

        <!-- 新建警示对话框 -->
        <el-dialog :title="`创建《${unitCatch?unitCatch.name:''}》单元的预警信息`" :append-to-body="true" :visible.sync="addReportDialog" width="50%">
          <section>
            <el-form :model="addReportForm" status-icon :rules="addReportFormRules" ref="addReportRef" label-width="100px">
              <el-form-item>
                <el-button type="primary" @click="backSelectUnitClick" icon="el-icon-back">重新选择单元</el-button>
              </el-form-item>
              <el-form-item label="警告名称" prop="name">
                <el-input v-model="addReportForm.name"></el-input>
              </el-form-item>
              <el-form-item label="警告等级" prop="warningLevel">
                <el-select class="w100" v-model="addReportForm.warningLevel" placeholder="请选择">
                  <el-option v-for="item in reportTypes2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="警告人员" prop="warningPersonnel">
                <el-input v-model="addReportForm.warningPersonnel"></el-input>
              </el-form-item>
              <el-form-item label="警告时间" prop="warningTime">
                <el-date-picker class="w100" value-format="yyyy-MM-dd HH:mm:ss" v-model="addReportForm.warningTime" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item> -->
              <el-form-item label="描述" prop="remark">
                <el-input type="textarea" v-model="addReportForm.remark"></el-input>
              </el-form-item>
            </el-form>
          </section>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addReportDialog = false">取 消</el-button>
            <el-button type="primary" @click="addReportFun">确 定</el-button>
          </span>
        </el-dialog>
      </section>
    </iLayout>
  </main>
</template>

<script>
import api from '../../api/private/report/index'
import api3 from '../../api/private/report'
import * as storage from '../../utils/storage.js'
export default {
  data() {
    return {
      loadings: {
        list: false,
        tree: false
      },
      // test
      unitTree: [],
      unitTreeProps: {
        children: 'children',
        label: 'name'
      },
      // test
      reprotPage: {
        page: 1,
        limit: 11,
        total: 10
      },
      handelReportList: [],
      shortFaces: [
        { label: '断面1', value: '1' },
        { label: '断面2', value: '2' },
        { label: '断面3', value: '3' },
        { label: '断面4', value: '4' }
      ],
      shortFaceSelect: '',
      units: [
        { label: '单元1', value: '1' },
        { label: '单元2', value: '2' },
        { label: '单元3', value: '3' },
        { label: '单元4', value: '4' }
      ],
      unitSelect: '',
      reportTypes: [
        { label: '全部', value: '' },
        { label: '一级', value: 1 },
        { label: '二级', value: 2 },
        { label: '三级', value: 3 }
      ],
      reportTypes2: [
        { label: '一级', value: 1, tagType: 'danger' },
        { label: '二级', value: 2, tagType: 'warning' },
        { label: '三级', value: 3, tagType: 'success' }
      ],

      queryDateList: [
        { label: '全部警告', value: 'all' },
        { label: '当日警告', value: 'now' },
        { label: '一周内', value: 'week' },
        { label: '一月内', value: 'month' },
        { label: '自定义', value: '-1' }
      ],
      handelType: [
        { label: '撤销', value: 1, warn: '撤销操作会撤销这次测试的数据' },
        { label: '清零', value: 2, warn: '清零操作会删除所有数据记录' },
        { label: '废弃', value: 3, warn: '废弃操作会彻底弃用本单元' },
        { label: '留用', value: 4, warn: '留用操作会留用被警告的记录' }
      ],
      reportStates: [
        { label: '全部', value: '' },
        { label: '已处理', value: 1 },
        { label: '未处理', value: 2 }
      ],
      // 请求筛选参数
      queryDateSelect: '',
      DIYDate: '',
      // 开始时间
      startWarningTime: '',
      // 结束时间
      endWarningTime: '',
      // 名称字符
      queryName: '',
      // 测量的类型
      queryTypeSelect: null,
      // 预警的等级
      queryReportGrade: null,
      // 状态
      queryReportState: null,
      // 处理警告
      handelReportForm: {
        reportTypeSelect: '',
        typeSelect: '',
        remark: ''
      },
      handelReportFormRules: {
        reportTypeSelect: [{ required: true, message: '请选择处理结果级别', trigger: 'change' }],
        typeSelect: [{ required: true, message: '请选择处理方式', trigger: 'change' }],
        remark: [{ required: true, message: '请输入处理描述', trigger: 'change' }]
      },
      // 当前展开的展开框
      collapseValue: '',
      tableData: [],
      // 对话框们
      dialog: {
        handle: false,
        add: false,
        lookDetails: false
      },
      // 选择单元
      selectUnitDialog: false,
      // 新建警告
      addReportDialog: false,
      addReportForm: {
        elementId: '',
        name: '',
        remark: '',
        warningLevel: '',
        warningPersonnel: '',
        warningTime: ''
      },
      addReportFormRules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        warningPersonnel: [{ required: true, message: '请输入警告人员', trigger: 'change' }],
        remark: [{ required: true, message: '请输入处理描述', trigger: 'change' }],
        warningLevel: [{ required: true, message: '请选择预警级别', trigger: 'change' }],
        warningTime: [{ required: true, message: '请选择预警时间', trigger: 'change' }]
      },
      lookDetailsCache: '',
      unitCatch: ''
    }
  },
  mounted() {
    this.$ebs.$on('project_change', this.project_change_handle)
  },
  methods: {
    project_change_handle() {
      window.localStorage.removeItem('unitChach')
      this.getReportFun()
      this.getunitTree()
    },
    // 日期选择改变
    queryDateChange(str) {
      if (str == -1) {
        this.startWarningTime = ''
        this.endWarningTime = ''
        return
      }
      let nowDate = new Date()
      let oldDate = new Date()
      switch (str) {
        case 'all':
          nowDate = ''
          oldDate = ''
          break
        case 'now':
          // 什么都不做，保持日期一样
          break
        case 'week':
          // 减7天
          oldDate = new Date(nowDate - 604800 * 1000)
          break
        case 'month':
          // 减30天
          oldDate = new Date(nowDate - 2592000 * 1000)
          break
      }
      this.startWarningTime = this.machiningDate(nowDate)
      this.endWarningTime = this.machiningDate(oldDate)
    },
    machiningDate(date) {
      if (!date) return date
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let retDate = `${y}-${m}-${d}`
      return retDate
    },
    // 自定义日期改变
    DIYDateChange(date) {
      this.startWarningTime = date[0]
      this.endWarningTime = date[1]
    },
    // 类型选择改变
    queryTypeChange() {},
    // 获取预警列表
    async getReportFun() {
      this.loadings.list = true
      // return
      let req = {
        startWarningTime: this.startWarningTime,
        endWarningTime: this.endWarningTime,
        measurementType: this.queryTypeSelect,
        name: this.queryName,
        type: this.queryReportState,
        warningLevel: this.queryReportGrade,
        page: this.reprotPage.page,
        limit: this.reprotPage.limit,
        projectId: this.$store.state.project_id
      }
      let res = await api.getReportList(req)
      if (res.code == 0) {
        this.handelReportList = res.data
        this.reprotPage.total = res.data.length
      } else {
        this.$msg.error(res.msg)
      }
      this.loadings.list = false
    },
    // 获取预警处理记录列表
    async getReportHandleFun(da) {
      let item = da ? da : this.catchItemData
      let req = { earlyWarningId: item.id }
      let res = await api3.getReportHandleList(req)
      if (res.code == 0) {
        setTimeout(() => {
          this.$set(item, 'handleData', res.data)
        }, 200)
      } else {
        this.$msg.error(res.msg)
      }
    },
    lookDetails(item) {
      this.lookDetailsCache = item
      this.dialog.lookDetails = true
    },
    getReportRecordData(data) {
    },
    collapseChange(str) {
      if (typeof str == 'string') return
      let itemData = this.handelReportList[str]
      this.catchItemData = itemData
      this.getReportHandleFun()
      // itemData && this.getUnitData(itemData)
    },
    // 添加警告单击
    addReportClick() {
      this.dialog.add = true
    },
    backSelectUnitClick() {
      this.addReportDialog = false
      this.selectUnitDialog = true
    },
    // 添加警告事件
    addReportFun() {
      this.dialog.add = false
    },
    // 处理警告单击
    handleReportClick(data) {
      this.reportCache = data
      // this.handelReportTypeSelect = data.warningLevel
      this.handelReportForm.reportTypeSelect = data.warningLevel
      this.dialog.handle = true
    },
    // 处理警告函数
    async handleReportFun() {
      let req = {
        earlyWarningId: this.reportCache.id,
        warningLevel: this.handelReportForm.reportTypeSelect,
        mode: this.handelReportForm.typeSelect,
        remark: this.handelReportForm.remark
      }
      let res = await api.handleReport(req)
      if (res.code == 0) {
        // this.getReportHandleFun(this.reportCache)
        // this.getReportFun()
      } else {
        this.$msg.error(res.msg)
      }
      this.dialog.handle = false
    },
    // 新建预警点击
    addReportClick() {
      this.unitCatch = JSON.parse(window.localStorage.getItem('unitChach'))
      if (this.unitCatch) {
        this.addReportDialog = true
      } else {
        this.selectUnitDialog = true
      }
    },

    // 选择单元单击
    selectUnitClick() {},
    // 新建预警函数
    addReportFun() {
      this.$refs.addReportRef.validate(async bool => {
        if (bool) {
          let req = this.addReportForm
          req.elementId = this.unitCatch.id
          let res = await api3.addReport(req)
          if (res.code == 0) {
            this.addReportDialog = false
            this.$refs.addReportRef.resetFields()
          } else {
            this.$msg.error(res.msg)
          }
        }
      })
    },
    // 获取单元树
    async getunitTree(id) {
      this.loadings.tree = true
      this.unitTree = []
      let req = {
        projectId: id ? id : this.$store.state.project_id
      }
      let res = await api3.getUnitTree(req)
      if (res.code == 0) {
        this.unitTree = res.data
      } else {
        this.$msg.error(res.msg)
      }
      this.loadings.tree = false
    },
    // 单元树节点单击
    unitTreeNodeClick(data, node) {
      if (data.frequency != null) {
        // 本地存储单元
        this.unitCatch = data
        window.localStorage.setItem('unitChach', JSON.stringify(data))
        this.selectUnitDialog = false
        this.addReportDialog = true
      }
    },
    nodeClick(data, node) {}
  },
  destroyed() {
    this.$ebs.$off('project_change', this.project_change_handle)
  }
}
</script>

<style lang="scss" scoped>
.addBoxTreeTarget {
  width: 150px;
  margin-right: 10px;
}
.selectBox {
  margin-bottom: 10px;
}
.dataBox {
  padding: 10px;
  padding-right: 30px;
  overflow-y: auto;
}
.routeName {
  max-width: 500px;
  margin-right: 45px;
  overflow: hidden;
  text-overflow: ellipsis; //文本溢出显示省略号
  white-space: nowrap; //文本不会换行
}
.handleBox {
  height: 300px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.reportRow .reportRowBody div {
  margin-right: 30px;
}
</style>